import 'package:flutter/material.dart';

import './tabs/Apex.dart';
import './tabs/Epic.dart';
import './tabs/GitLab.dart';
import './tabs/Steam.dart';
import './tabs/Message.dart';

// 底部菜单和侧边栏
class TabsWer extends StatefulWidget {
  const TabsWer({super.key});

  @override
  State<TabsWer> createState() => _TabsWerState();
}

class _TabsWerState extends State<TabsWer> {
  int indexIcon = 0;
  List<Widget> list = [
    EpicPage(),
    ApexPage(),
    GitLabPage(),
    MessagePage(),
    SteamPage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter App", style: TextStyle(color: Colors.white)),
        backgroundColor: Colors.deepPurple,
      ),
      body: list[indexIcon],
      // 左侧边栏
      drawer: Drawer(
        backgroundColor: Colors.white.withAlpha(190),
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            // 侧边栏头部
            Row(
              children: [
                Expanded(
                  flex: 1,
                  child: DrawerHeader(
                    decoration: BoxDecoration(
                      color: Colors.deepPurpleAccent,
                      image: DecorationImage(
                        image: NetworkImage(
                          "https://xiayh.top/upload/thumbnails/2025/w800/DM20250828171248001.png",
                        ),
                        fit: BoxFit.cover,
                      ),
                    ),
                    child: Column(
                      // 丑 不要
                      // children: [
                      //   ListTile(
                      //     leading: CircleAvatar(backgroundImage: NetworkImage("https://xiayh.top/upload/thumbnails/2025/w800/DM20250828171248001.png")),
                      //     title: Text("个人中心",style: TextStyle(color: Colors.white),),
                      //   ),
                      // ],
                    ),
                  ),
                ),
              ],
            ),
            SizedBox(height: 10),
            Row(
              children: [
                // 用户资料
                Padding(
                  padding: EdgeInsets.only(left: 15, right: 20),
                  child: ClipOval(
                    child: Image.network(
                      "https://xiayh.top/upload/1730804978678.jpg",
                      width: 50,
                      height: 50,
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      "Smile",
                      style: TextStyle(fontSize: 20, color: Colors.black45, fontWeight: FontWeight.w800),
                    ),
                    Text(
                      "2840067180@qq.com",
                      style: TextStyle(fontSize: 16, color: Colors.black45, fontWeight: FontWeight.w800),
                    )
                  ],
                )
              ],
            ),
            Divider(),
            Padding(
              padding: EdgeInsets.all(10),
              child: Container(
                padding: EdgeInsets.only(top: 10, bottom: 10),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(15),
                  color: Colors.white.withAlpha(180),
                ),
                child: Column(
                  spacing: 5,
                  children: [
                    ListTile(
                      leading: CircleAvatar(child: Icon(Icons.people)),
                      title: Text("个人中心"),
                    ),
                    ListTile(
                      leading: CircleAvatar(child: Icon(Icons.settings)),
                      title: Text("系统设置"),
                    ),
                    ListTile(
                      leading: CircleAvatar(child: Icon(Icons.email)),
                      title: Text("我的消息"),
                    ),
                    Padding(
                      padding: EdgeInsets.only(left: 12, right: 12),
                      child: Divider(),
                    ),
                    ListTile(
                      leading: CircleAvatar(child: Icon(Icons.shop)),
                      title: Text("商城"),
                    ),
                    ListTile(
                      leading: CircleAvatar(child: Icon(Icons.show_chart)),
                      title: Text("装扮中心"),
                    ),
                    ListTile(
                      leading: CircleAvatar(child: Icon(Icons.settings)),
                      title: Text("系统设置"),
                    ),
                    Padding(
                      padding: EdgeInsets.only(left: 12, right: 12),
                      child: Divider(),
                    ),
                    ListTile(
                      leading: CircleAvatar(child: Icon(Icons.schedule)),
                      title: Text("最近"),
                    ),
                    ListTile(
                      leading: CircleAvatar(child: Icon(Icons.scale)),
                      title: Text("定时"),
                    ),
                    ListTile(
                      leading: CircleAvatar(child: Icon(Icons.contact_phone)),
                      title: Text("客服"),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
      // 右侧边栏
      endDrawer: Drawer(child: Text("我是右侧边栏")),
      // 底部菜单
      bottomNavigationBar: BottomNavigationBar(
        // 点击选择的菜单
        currentIndex: indexIcon,
        // 菜单样式 >=4 时需要加上
        type: BottomNavigationBarType.fixed,
        onTap: (index) {
          setState(() {
            indexIcon = index;
          });
        },
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: "Home"),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: "Settings",
          ),
          BottomNavigationBarItem(icon: Icon(Icons.add), label: "Add"),
          BottomNavigationBarItem(icon: Icon(Icons.message), label: "Message"),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: "Person"),
        ],
      ),
      // 悬浮按钮
      floatingActionButton: Container(
        width: 60,
        height: 60,
        padding: EdgeInsets.all(4),
        margin: EdgeInsets.only(top: 8),
        decoration: BoxDecoration(borderRadius: BorderRadius.circular(30)),
        child: FloatingActionButton(
          backgroundColor: indexIcon == 2
              ? Colors.deepPurpleAccent
              : Colors.white,
          onPressed: () {
            setState(() {
              indexIcon = 2;
            });
          },
          // 将圆角矩形改为圆形
          shape: const CircleBorder(),
          child: Icon(
            Icons.add,
            color: indexIcon == 2 ? Colors.white : Colors.deepPurpleAccent,
          ),
        ),
      ),
      // 悬浮按钮位置
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }
}
